<template>
	<view class="container">
		<view style="display: flex;">
			<view class="" style="margin-right: 40rpx;flex: 1;" >	
				<u-search placeholder="搜索你想要的游戏" searchIcon="/static/search.png" height="70rpx" :searchIconSize="18" bgColor="#F2F2F2" :showAction="false" :disabled="true" @click="goSearch()">
				</u-search>
			</view>
			<view style="display: flex;position: relative;" v-on:click="goMsg()">
				<u-icon name="/static/xiaox.png" size="24"></u-icon>
				<u-badge :isDot="true" type="error" :absolute="true" :offset="[24,-3]"></u-badge>
			</view>
		</view>
		<view style="margin: 0 -20rpx;">
			<view style="margin-top: 30rpx;">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(listItem,listIndex) in catelist" :key="listIndex" @click="detail(listItem.id,listItem.name)" >
						<image :src="listItem.image" style="margin:20rpx 0;border-radius:20rpx;width: 100rpx;height: 100rpx;"></image>
						<text class="grid-text">{{listItem.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		<view v-for="(item,index) in categame" :key="index">
			<view style="display: flex;margin-top: 40rpx;margin-bottom: 20rpx;">
				<u--text :size="18" iconStyle="width: 44rpx;height: 44rpx;margin-right:2px;margin-left:" margin="" :bold="true" :text="item.name"></u--text>
				<u--text suffixIcon="/static/2jiant.png" iconStyle="font-size: 18px" :size="14" align="right" color="#8C8C8C" text="更多" @click="detail(item.id,item.name)"></u--text>
			</view>
			<view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item1,index1) in item.info" :key="index1" @click="navto(item1.game_url)">
						<image :src="item1.image" style="margin:20rpx 0;border-radius:20rpx;width: 128rpx;height: 128rpx;"></image>
						<text class="grid-text">{{item1.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getCate,getCateToGame} from  "@/api/api.js"
	export default {
		data() {
			return {
				catelist:[],
				categame:[],
			}
		},
		onLoad() {
			this.show();
		},
		methods: {
			show(){
				getCate().then(res=>{
					this.catelist = res.data
				});
				getCateToGame().then(res=>{
					this.categame = res.data
					console.log(this.categame)
				});
			},
			navto(val){
				if (uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/pages/webview/webview?gameurl='+val
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			detail(id,name){
				uni.navigateTo({
					url:'/pages/classify/detail?id='+id+'&name='+name,
					
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			goMsg(){
				uni.navigateTo({
					url:'/pages/msg'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.grid-text {
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:140rpx;
	}
</style>
